<script setup>
import { ref, onMounted, defineProps } from 'vue'
import { getVideoInfoAPI, createComment, deleteCommentAPI } from '@/services/course'
import CComment from '@/components/cc-comment/index'
import { useUserStore } from '@/stores'
import dayjs from 'dayjs'
const props = defineProps({
  id: {
    type: Number,
  },
})
const Info = ref()
const getInfo = async (id) => {
  // const res = await getVideoInfoAPI(id)
  // Info.value = res.data
  getCourseInfo()
}
onMounted(() => {
  getInfo(props.id)
})

//评论功能
// 唤起新评论弹框
let ccRef = ref(null)
function openComment() {
  ccRef.value.newCommentFun()
}

// 评论回调事件
const userStore = useUserStore()
async function replyFun({ params }, callback) {
  console.log('replyFun', params)
  if (!params.user_content) {
    await uni.showToast({
      icon: 'error',
      title: '不能发表空评论哦!',
    })
    return
  }
  const {
    create_time,
    id,
    is_like,
    like_count,
    owner,
    parent_id,
    reply_id,
    reply_name,
    user_avatar,
    user_content,
    user_name,
  } = params
  const reqData = {
    courseId: props.id, //视频id
    superiorId: parent_id, //父id
    commenterAvatar: userStore.user.avatarUrl, //评论人头像
    commenterName: userStore.user.userName, //评论人昵称
    commenterId: userStore.user.id, //评论人id
    reviewedId: reply_id, // 被回复人评论id
    reviewedName: reply_name, // 被回复人名称
    text: user_content, // 评论内容
    likeNumber: like_count, // 点赞数统计
  }
  // 当请求成功, 调用callback执行评论插入;
  createComment(reqData).then((res) => {
    if (res.code === 200) {
      res = { id: res.data }
      callback(res)
    }
  })
}

const deleteMode = ref('only')
function deleteFun({ params, mode }, callback) {
  deleteCommentAPI(params).then((res) => {
    if (res.code === 200) {
      callback(res)
    }
  })
}

// 当前账号用户(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
const userInfo = ref({
  id: userStore.user.id, // 评论id
  user_name: userStore.user.userName, // 用户名
  user_avatar: userStore.user.avatarUrl, // 用户头像
})
const getCourseInfo = async () => {
  const res = await getVideoInfoAPI(props.id)
  Info.value = res.data
  const userId = res.data.userId
  tableData.value = res.data.comments.map((item) => {
    const {
      id,
      superiorId,
      reviewedId,
      reviewedName,
      commenterName,
      commenterAvatar,
      text,
      likeNumber,
      createDateTime,
      commenterId,
    } = item
    return {
      id: id, // 评论id
      commenterId, //评论人id
      parent_id: superiorId === 0 ? null : superiorId, // 父级评论id
      reply_id: !reviewedId ? null : reviewedId, // 被回复人评论id
      reply_name: !reviewedName ? null : reviewedName, // 被回复人名称
      user_name: commenterName, // 用户名
      user_avatar: commenterAvatar, // 评论者头像地址
      user_content: text, // 评论内容
      is_like: false, // 是否点赞
      like_count: likeNumber, // 点赞数统计
      create_time: dayjs(createDateTime).format('YYYY-MM-DD HH:mm'), // 创建时间
      user_id: userId, //视频作者id
    }
  })
  Info.value = res.data
  tableTotal.value = res.data.comments.length
}
let tableTotal = ref(4) // 评论总数
let tableData = ref([]) // 评论表
</script>
<template>
  <view class="outer">
    <view class="video">
      <video :src="Info.url"></video>
    </view>
    <view class="uploader">
      <uv-avatar :src="Info.avatarUrl" shape="circle"></uv-avatar>
      <view class="inner">
        <span style="margin-left: 20rpx; font-weight: bolder">{{ Info.userName }}</span>
        <span style="margin-left: 20rpx; color: #b6bab6; font-size: 16rpx">{{ Info.account }}</span>
      </view>
    </view>
    <view class="courseInfo">
      <view style="padding: 20rpx; display: flex; flex-direction: column">
        <span class="text" style="color: black">{{ Info.title }}</span>
        <span
          class="text"
          style="
            font-size: 27rpx;
            color: black;
            white-space: pre-wrap;
            line-height: 1.5;
            font-weight: 500;
          "
          >{{ Info.description }}</span
        >
      </view>
    </view>
    <CComment
      ref="ccRef"
      v-model:userInfo="userInfo"
      v-model:tableData="tableData"
      v-model:tableTotal="tableTotal"
      @likeFun="likeFun"
      @replyFun="replyFun"
      @deleteFun="deleteFun"
      :deleteMode="deleteMode"
    ></CComment>
    <view class="btn" @tap="openComment">发一条新评论</view>
  </view>
</template>

<style>
page {
  background-color: white;
}
.text {
  display: inline;
  border-bottom: solid 1px #979292;
  padding-bottom: 0.1rem;
  font-weight: 400;
  color: black;
}
.courseInfo {
  width: 100%;
  /* background-color: white; */
  /* height: 300rpx; */
}
.text {
  font-size: 50rpx;
  color: white;
}
.outer {
  height: 70%;
}
.video {
  background-color: black;
  height: 500rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0rpx 0rpx 10rpx 10rpx;
  flex-direction: column;
}
.video > video {
  width: 100%;
}
.uploader {
  padding: 20rpx;
  display: flex;
}
.inner {
  display: flex;
  flex-direction: column;
}

.btn {
  text-align: center;
  color: #fff;
  padding: 20rpx;
  margin: 20rpx;
  border-radius: 20rpx;
  background-color: #2979ff;
}

.text {
  display: inline;
  border-bottom: solid 1px #979292;
  padding-bottom: 0.1rem;
  font-weight: 400;
  color: black;
}
.courseInfo {
  width: 100%;
}
.text {
  font-size: 50rpx;
  color: white;
}
.image {
  padding: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0rpx 0rpx 10rpx 10rpx;
  flex-direction: column;
}
.image > image {
  width: 100%;
}
.uploader {
  padding: 20rpx;
  display: flex;
}
.inner {
  display: flex;
  flex-direction: column;
}
</style>
